@font-face {
    font-family: "Arsenal";
    src: url("res/ArsenalSC.ttf");
}

body{
    text-align: center;
    background-color: grey;

    font-family: 'Courier New', Courier, monospace;
    color: white;

    margin: 0px;

    background-color: rgb(30, 30, 30);

    overflow-x: hidden;
}

hr{
    border-color: rgb(81, 80, 102);
}

span{
    color: yellow;
}

header{
    z-index: 100;

    position: fixed;

    border-radius: 40px;

    padding: 20px;

    height: 35px;

    background-color: rgb(20, 20, 20);

    box-shadow: 10px 10px rgba(0, 0, 0, 0.5);

    transform: translate(50vw, 30px) translate(-50%, 0);
}

.header_info{
    margin: 0px;
}

.header_button{
    background-color: transparent;

    color: white;

    border: none;

    border-left-style: solid;
    border-right-style: solid;

    margin: 0px;

    font-size: 1rem;
}

.projects{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.project{
    width: min(604px, 90vw);
    height: 500px;
    background-color: rgb(220, 220, 220);

    border-radius: 10px;

    border-top-left-radius: 15px;
    border-top-right-radius: 15px;

    box-shadow: 10px 10px #000000;

    color: black;

    margin-left: 20px;
    margin-right: 20px;

    margin-top: 15px;
    margin-bottom: 15px;
}

.project_image{
    width: min(600px, 90vw);
    height: min(300px, 45vw);

    background-color: rgba(0, 0, 0, 0.1);

    border-top-left-radius: 10px;
    border-top-right-radius: 10px;

    background-size: contain;

    border-style: dashed;
    border-color: rgb(150, 150, 150);
    border-width: 2px;

    text-align: right;
}

.project_button{
    background-image: url(Projects/res/enter.png);
    
    width: 40px;
    height: 40px;

    background-size: contain;

    background-color: transparent;

    margin: 10px;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Old versions of Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

.background{
    width: 100vw;
    height: 100vh;

    z-index: -100;
}

.title{
    font-size: 150px;

    position: absolute;
    transform: translate(50vw, 50vh) translate(-50%, -50%);

    margin: 0px;
}

.subtitle{
    font-size: 55px;

    color: rgb(175, 175, 175);

    position: absolute;
    transform: translate(50vw, 50vh) translate(-50%, -50%) translate(0, -100px);

    margin: 0px;
}

.section{
    margin: 10px;

    width: 100vw;

    display: flex;
    flex-wrap: wrap;
}

.paragraph_holder{
    width: min(800px, 95vw);

    transform: translate(50vw, 0) translate(-50%, 0);

    border-left-style: solid;
    border-right-style: solid;

    border-width: 2px;

    border-color: white;
}

.about_general{
    position: absolute;

    width: min(1200px, 95vw);
    height: 600px;

    display: flex;
    justify-content: center;

    transform: translate(50vw, 150px) translate(-50%, 0);

    flex-wrap: wrap;
}

.about_image{
    width: 375px;
    height: 500px;

    background-image: url(res/Surf.png);
    background-size: contain;

    border-radius: 10px;

    box-shadow: 10px 10px #000000;
}

.about_info{
    width: 460px;
    height: 460px;

    text-align: left;

    padding: 20px;

    border-left-style: solid;
    border-width: 1px;

    border-color: white;
}

.about_link{
    color: rgb(150, 150, 150);

    cursor: pointer;

    text-decoration: underline;
    text-decoration-color: rgba(255, 255, 255, 0);

    animation-name: to_link_hover;
    animation-duration: 0.25s;
}

@keyframes to_no_link_hover {
    from{
        color: rgb(150, 150, 150);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0);
    }
    to{
        color: rgb(255, 255, 255);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 1);
    }
}

.about_link:hover{
    color: rgb(255, 255, 255);

    text-decoration: underline;
    text-decoration-color: rgb(255, 255, 255);

    animation-name: to_no_link_hover;
    animation-duration: 0.25s;
}

@keyframes to_link_hover {
    from{
        color: rgb(255, 255, 255);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 1);
    }
    to{
        color: rgb(150, 150, 150);
        text-decoration: underline;
        text-decoration-color: rgba(255, 255, 255, 0);
    }
}