*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    text-decoration: none;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;      /* IE 10+ */
    user-select: none; 
}
.unselectable {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;         /* Standard syntax */
}
@font-face {
    font-family: 'chalkduster';
    src: url('./Chalkduster.ttf');
}
.instagram-btn {
  background: radial-gradient(circle at 30% 107%, #fdf49787 0%, #f8e729 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%) !important;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;

}

.google-btn {
  background:#fff !important;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}
.google-btn > p {
    color:#000 !important;
}
:root {
     /* background */
    --primary-bg-color: #000;
    --secondary-bg-color: #fff;
    
    /* color */
    --primary-color:#fff;
    --secondary-color:#000;

    /* font */
    --font-header:'chalkduster', 'Arial', 'Helvetica';
    --font-primary:"Roboto", sans-serif;

    /* button */
    --btn-primary-bg: rgb(0, 97, 0);
}
html{
    scroll-behavior: smooth;
    overflow:scroll;
}
body{ 
    background-color: var(--primary-bg-color);
    padding: 0 .5rem;
}

main, body {
    width:100%;
    height:100%;

}

main {
    display:flex;
    align-items: start;
    justify-content: center;
}

#img-container, #details-container {

    height:100%;
    width:100%;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#details-container > div > p {
    text-align: left;
    color:#fff;
}
#details-container{
    border-right:2px solid #f00;
    
    height:100vh;

    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;

    gap:2.5rem;
}
.details-btn:hover{
    cursor:pointer;
    opacity:.68;
    transition: .5s;
    
}
.details-btn {

    z-index: 998;

    padding:4px;

    min-width: 75%;

    height:45px;

    border-radius: 12px;
    background-color:var(--btn-primary-bg);

    display:flex;
    flex-direction: column;
    align-items: start;
    justify-content:center;

    font-size:18pt;

    color:var(--primary-color);
    
    position:relative;

    overflow:hidden;

}

.img-side {
    height:35px;
    aspect-ratio: 1 / 1;

    position:absolute;

    right:5px;
    bottom:2px;;
}
#img-main {
    width:100%;
}

#logo-container{
    transition: .5s;
    border-bottom:2px solid #f00;
}
#logo-title {
    display:flex;
    gap:8px;

    color: var(--primary-color);

    font-size:32pt;

    padding-left:2rem;
}

.primary-color {
    color:var(--primary-color);
}

#mailto {
    color:var(--primary-color);
    border:2px solid red;
    
    margin-top:.5rem;

    padding:4px;
}

#contact {
    display:flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
}

footer > p {
    text-align: left;
    margin-top:1.5rem;

    font-size:9pt;
}
#logo-title-footer{
    display:flex;
    gap:8px;

    color: var(--primary-color);

    font-size:12pt;

    justify-content: center;
}

.fixed-logo {
    z-index:999;

    width:100%;
    padding:.25rem !important;
    position:fixed;
    top:0;
    left:0;
    background-color:var(--primary-bg-color) !important;

    display:flex;

    align-items: center;
    justify-content: center;
}
.header-font {
  font-family: var(--font-header);
}
.roboto-font {
  font-family: var(--font-primary);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}


footer{
    margin-top:1rem;
    padding-top:1rem;

    height:65px;

    border-top:2px solid #f00;

    padding-bottom:.5rem;

}