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

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     margin-top: 70px;
   
}

html {

}

:root {
   --first-color: white;
   --background-color: dodgerblue;
   --bs-link-hover-color: #0a58ca;
   
   }

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: .5rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--bs-heading-color);
}

.grid-container {
   display: grid;
   margin: 0 auto;
   height: 100vh;
   grid-template-areas: "header"
                        "nav"
                        "main"
                        "footer";

}

header {
   grid-area: header;
   width: 100%;
   height: 70px;
   position: fixed;
   top: 0;
   z-index: 10;
   background-color:var(--background-color);
   border-radius: 3px; 
}

.header-inner-right {
   height: 70px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.head-title {
   color: var(--first-color);
   font-size: 1.5em;
   font-weight: 800;
   text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

nav {
   grid-area: nav;
}

main {
   grid-area: main;
   display: flex;
   justify-content: center;
   padding: 0.44rem;
}

.main-inner {
   max-width: 1200px;
   text-align: center;
}

footer {
   grid-area: footer;
   width: 100%;
   height: 100px;
   margin-top: auto;
   display: flex;
   justify-content: center;
   align-items: center;   
   margin-top: auto;
}

/*Botton*/

a:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

a:focus {      
    box-shadow: ;
}

a:link {
   color: #ffffff;
}
 
a:active {
    color: #fff;
    background-color: #0a58ca;
    border-color: #0a53be;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

.btn-primary {
     max-width: 300px;
     background-color: #0d6efd;
     border-color: #0d6efd;
     color: #fff;
     margin: 20px;
}

.btn {
    display: inline-block;
    border-radius: 5px;
    padding: 8px 12px;
    background-color: #0d6efd;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: 0 0 0 0.25rem rgba(255.255.255.5, 0.5);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;

}

/* mobile size*/

@media (max-width:480px) {
   body {
      margin-top: 110px;
   }
}

@media (min-width:481px) and (max-width: 768px) {
   body {
      margin-top: 120px;
   }
}