@import url("/css/fontSizeForScreenSize.css");

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

:root{
    
    --pallete-1st:#DF7602;
    --pallete-2nd:#009939;
    --pallete-3rd:#0de100;
    --pallete-4th:#004010;

    --pallete-white:white;
    --pallete-grey:#333333;
    --pallete-black:black;

    --menubar-height:90px;
}

:root::-webkit-scrollbar {
    width: 15px;  
}

:root::-webkit-scrollbar-track {
    background: var(--pallete-black);
}

:root::-webkit-scrollbar-thumb {
    background-color: var(--pallete-1st);    
    border-radius: 10px;       
    border: 3px solid var(--pallete-black);  
}

@font-face {
    font-family:Trademark;
    src: url("/fonts/RubikMonoOne-Regular.ttf");
}

@font-face{
    font-family:Title;
    src:url("/fonts/ShareTechMono-Regular.ttf");
}

@font-face {
    font-family:Basic;
    src: url("/fonts/ShareTech-Regular.ttf");
}

body{
    font-family:Basic;
}

section{
    width:100%;
}

h1{
    position:relative;
    font-family:Title;
    font-style:italic;
    color:var(--pallete-2nd);
    font-size:2.5em;
    margin:23px 0 23px 0;
    --before-color:var(--pallete-2nd);
}

h1[banner]{
    font-family:Trademark;
    --before-color:var(--pallete-1st);
}

h1:before{
    content:'';
    position:absolute;
    bottom:-13px;
    left:0%;
    width:100%;
    height:0.43rem;
    background:var(--before-color);
}

h2{
    font-family:Basic;
}

p{
    text-indent:2em;
}

a{
    text-decoration:none;
    color:var(--pallete-black);
}

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

button{
    cursor:pointer;
    width:100%;
    min-height:43px;
    padding:13px;
    margin:13px;
    font-weight:600;
    font-size:20px;
    color:var(--pallete-black);
    background-color:var(--pallete-1st);
    border:3px solid var(--pallete-black);
    border-radius:15px;
    transition:color, border, background, 0.35s ease-in-out;
}

button:hover{
    color:var(--pallete-white);
    border:3px solid var(--pallete-grey);
    background-color:var(--pallete-black);
}

button:active{
    color:var(--pallete-white);
    border:3px solid var(--pallete-white);
    background-color:var(--pallete-grey);
}