/* CSS HEX 
--oxford-blue: #001427ff;
--hookers-green: #708d81ff;
--jasmine: #f4d58dff;
--engineering-orange: #bf0603ff;
--dark-red: #8d0801ff;
*/

html, body {
    margin: 0;
    font-family: 'Poppins', 'Black', 'Roboto', sans-serif;
    background-color: #0B1622;
}

.techstacksimg {
    width: 80%;
    border-radius: 30px;
    margin: 20px;
    background-color: #151F2E;
    padding: 30px;
}

.sections {
    display: flex;
    flex-wrap: wrap;
}

.sections section {
    flex-basis: 19.5%;
    /* antal sections i hvert row = 5*/
}

.imgtext {
    color: #f4d58dff;
    text-align: center;
    font-size: 2.2em;
    font-weight: 600;
    width: 110%;
}

.flip-container {
    perspective: 1000px;
}

.flip-container.flip .flipper {
    transform: rotateY(180deg);
}

.flipper {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative;
}

.front, .back {
    backface-visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.back {
    transform: rotateY(180deg);
    background-color: #1c4b91;
    width: 100%; 
    height: 100%;
    color: red;
}

.back p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

/* @media screen and (min-width: 900px) and (max-width: 1300px) {
    .imgtext {
        font-size: 1.5em;
    }
    
}

@media screen and (min-width: 400px) and (max-width: 900px) {
    .imgtext {
        font-size: 1em;
    }
    
} */

@media screen and (max-width: 1350px) {
    .sections section {
        flex-basis: 33.33%;
        /* antal sections fra 5 til 3 */
    }
}

@media screen and (max-width: 850px) {
    .sections section {
        flex-basis: 50%;
    }
}

@media (max-width: 500px) {
    .sections section {
        flex-basis: 100%;
    }
    .techstacksimg {
        width: 40%;
        margin: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 10px;
    }
    .imgtext {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media (max-width: 499px) {
    .icon-bar {
        display: none;
    }
}

#topofpage {
    display: none;
}

.divider {
    display: flex;
    margin: auto;
    
    &:before,
    &:after {
    content: "";
    flex: 1;
    }
}

.gradient {
    align-items: stretch;
    margin: 1em auto;
    height: 2em;
    line-height: 2em;
    color: white;
    background: rgb(11, 22, 34);
    font-size: 2em;
    font-weight: bold;
    width: 80%;
    
    &:before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(11, 22, 34, 0.2));
    border-radius: 40px;
    }
    
    &:after {
    background: linear-gradient(to left, rgba(255, 255, 255, 0.2), rgba(11, 22, 34, 0.2));
    border-radius: 40px;
    }
}