/* import */
@font-face{
  src: url(./src/font/CalSans-Regular.ttf);
  font-family: Cal Sans;
  font-weight: 400;
  font-style: normal;
}



/* all */
*{
    user-select: none;
    scroll-behavior: smooth;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "Cal Sans", "Monospace", "Arial", sans-serif;
    font-weight: 400;
    color: #000;
}

body{
    overflow-x: hidden;
    background-color: #fff2d8;
}

h1{
    font-size: 5rem;
}

h2{
    font-size: 4rem;
}

h3{
    font-size: 3rem;
    color: #ec6116;
    text-shadow: #ec6116 0 0 5px;
}

h4{
    font-size: 2rem;
}

p{
    font-size: 1.8rem;
}

a{
    text-decoration: none;
}

.highlighting{
    color: #ec6116;
}

.button{
    cursor: pointer;
    width: 60px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 14px;
    font-size: 30px;
    background: linear-gradient(145deg, #ffba08, #ec6116);
    color: #fff2d8;
    box-shadow: #ec6116 0px 0px 20px;
    text-shadow: #fff2d8 0 0 5px;
}

.text-button{
    cursor: pointer;
    width: 250px;
    height: 72px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 16px;
    border-radius: 14px;
    font-size: 24px;
    background: linear-gradient(145deg, #ffba08, #ec6116);
    color: #fff2d8;
    box-shadow: #ec6116 0px 0px 20px;
    text-shadow: #fff2d8 0 0 5px;
}
.text-button:hover, .button:hover, #navbar a:hover{
    transition: 0.4s;
    transform: scale(1.05);
}



/* navigation */
#navigation{
    pointer-events: none;
    z-index: 1000;
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    padding: 20px;
    font-size: 1.4rem;
}

#navbar{
    pointer-events: all;
    display: flex;
    gap: 1vw;
}
#navbar a{
    color: rgba(0, 0, 0, 0.5);
}
#navbar .active{
    font-weight: 800;
    color: rgba(0, 0, 0, 1);
}

#scroll-buttons{
    visibility: hidden;
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}



/* main */
.main{
    overflow: hidden;
    width: 100vw;
    min-width: 800px;
    height: 100vh;
    min-height: 500px;
}

.content{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw;
}

.img-container{
    max-width: 26%;
    min-width: 320px;
    max-height: 700px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.img-container img{
    width: 100%;
    position: absolute;
    border-radius: 1.5rem;
}
.img-container svg{
    pointer-events: none;
    transform: scale(1.8);
    filter: blur(10px);
}

.content-text{
    z-index: 900;
    max-width: 40%;
    min-width: 400px;
    display: flex;
    flex-direction: column;
}
#projects-main .content-text, #contact-main .content-text{
    min-width: 320px;
}

.projects-slideshow{
    width: 40%;
    min-width: 320px;
    max-width: 600px;
    height: 70%;
    min-height: 480px;
    max-height: 700px;
}

.one-project{
    width: 100%;
    min-width: 320px;
    max-width: 600px;
    height: 100%;
    min-height: 480px;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 25px;
    padding-bottom: 50px;
    background-image: url(./src/img/slideshow/bitcointags.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 1.5rem;
    text-align: center;
}
.one-project p{
    font-size: 1.6rem;
    color: #fff2d8;
    text-shadow: #fff2d8 0 0 10px;
}
.one-project:hover{
    cursor: pointer;
    transition: 0.4s;
    transform: scale(1.02);
}

.one-project-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.one-project-toolbar{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.one-project-toolbar p{
    opacity: 0.9;
}
.one-project-toolbar div{
    opacity: 0.9;
    width: 24px;
    height: 24px;
    background: conic-gradient(#fff2d8 100%, #fff2d886 0%);
    border-radius: 50%;
    box-shadow: #fff2d8 0 0 10px;
}

.contact-icons{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5vw;
    padding-top: 20px;
}
.contact-icons img{
    width: 60px;
    min-width: 60px;
    height: 60px;
}
.contact-icons a:hover{
    transition: 0.4s;
    transform: scale(1.1);
}

#footer-container{
    height: 15vh;
    min-height: 200px;
    max-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
}



/* media queries */
@media only screen and (max-width: 799px){
    #navbar{
        visibility: hidden;
        pointer-events: none;
    }

    #scroll-buttons{
        visibility: visible;
        pointer-events: all;
    }

    .main{
        height: auto;
        min-width: 80%;
    }

    .content{
        flex-direction: column;
        gap: 6vh;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    
    .img-container{
        max-width: 52%;
        min-width: 320px;
    }

    .content-text{
        min-width: 90%;
        text-align: center;
        align-items: center;
    }

    #projects-main .content-text, #contact-main .content-text{
        min-width: 90%;
    }

    .projects-slideshow{
        width: 68%;
    }

    #contact-main .content{
        flex-direction: column-reverse;
    }

    .contact-icons{
        gap: 15vw;
    }
    .contact-icons img{
        min-width: 60px;
    }

    #footer-container{
        min-width: 100%;
        font-size: 0.8rem;
    }
}



/* animations */
@keyframes fadeIn{
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

@keyframes fadeOut{
    0%{
        opacity: 1;
    }

    100%{
        opacity: 0;
    }
}










/*

    Created by warezoid with the love of freedom and numbers.
    
    I would like to thank my friends for their help in developing warezoid.com, whether it be through advice, design choices or sharing their opinions.





    SOURCES

    Sources can be seen as links to products used in warezoid.com, including graphics and research tools. I have chosen not to list elementary products such as HTML, CSS, JavaScript and many others.
    
    1. Graphics
        1.1. Google fonts - font used in warezoid.com: [ fonts.google.com ]
        1.1.1 Bakbak One - specific font used in Bitcointags: [ fonts.google.com/specimen/Cal+Sans ]
        1.2. SVGrepo - svg icons: [ svgrepo.com ]
        1.3. Haikei - blob generator: [ app.haikei.app ]
        1.4. Coolors - color palettes: [ coolors.co ]
        1.5. Figma - warezoid.com design: [ figma.com ]

    2. Research tools
        2.1. ChatGPT: [ chatgpt.com ]
        2.2. Stackoverflow: [ stackoverflow.com ]
        2.3. DeepL: [ deepl.com ]
        2.4. And the Internet itself.
    
    3. Validators
      3.1. HTML validator: [ validator.w3.org ]
      3.2. CSS validator: [ jigsaw.w3.org/css-validator ]

*/