@font-face {
    font-family: 'NothingYouCouldDo';
    src: url(../media/fonts/NothingYouCouldDo-Regular.ttf);
}

@font-face {
    font-family: 'ZenKurenaido';
    src: url(../media/fonts/ZenKurenaido-Regular.ttf);
}

body{
    margin: 0; 
    padding: 0;
    color: #ffffff;
    font-family: 'Roboto Mono', monospace; 
    background-image: url("../media/images/assets/coolLinks/background.png");
    background-repeat:round;
}

.backButton{
    margin:2.5rem 0rem 0px 2.5rem; 
    font-size:40px;
}

.backButton a{
    color: white;
    text-decoration: none;
}

#coolLinkContainer{
    margin: 3% 25% 5% 25%;
}

.coolLinkHeader{
    margin: 3%;
    font-size: 50px;
    text-align: center;
}

.coolLinkEntry{
    display: grid;
    grid-template-columns: 20% 80%;
    gap: 20px;
    margin: 50px 10px;
}

/*Cool link entry abbv. to CLE for brevity there's also a lot of hacks here (sorry!)*/
@media only screen and (max-width: 768px) {
    #coolLinkContainer{
        margin: 3% 5% 5% 5%;
    }
    .CLEImage{
        display: none;
    }
    .coolLinkEntry{
        display: grid;
        grid-template-columns: 100%;
        gap: 10px;
        margin: 50px 0px;
    }
}

.CLEImage{
    border-radius: 10%;
    width: 100%;
}

.CLEImage img{
    height: max-content;
}

.CLEContent{
    margin-left: 20px;
    padding: 20px 20px 20px 20px;
    border-radius: 2px;
    overflow-wrap: anywhere;
    color :black;
    background-image: url("../media/images/assets/coolLinks/perfer.png");
    background-repeat: repeat-y;
    background-size: 100%;
}

.CLEInfo{
    height: calc(100% - 60px);
    font-family: 'NothingYouCouldDo';
    font-weight:900;
}

.CLELink{
    padding: 10px;
    margin: 10px;
    font-size: 30px;
    color: black;
    border-radius: 5px;
    text-decoration: underline dashed black;
    font-family: 'NothingYouCouldDo';

    border-image-source: url("../media/images/assets/coolLinks/envolope_border_2.png");
    border-image-slice: 21 16 24 22 fill;
    border-image-width: 21px 16px 24px 22px;
    border-image-repeat: repeat;
    border-style: solid;
    border-width: 21px 16px 24px 22px;
}

.CLELink a{
    color: rgb(54, 54, 54);
}

.CLEContentText{
    margin: 20px 20px 10px 20px;
}

.CLEContentTags{
    position: relative;
    margin: 30px 10px 10px 12px;
    font-style: italic;
    text-decoration: underline dotted white;
}