* {
  box-sizing: border-box;
}

:root {
 --header-font: "Baskerville", Serif;
 --body-font: "Menlo", Serif;
 --border:  3px ridge white;
 --text-color: 	#082760;
 --teal: #17aaac;

}

html {
  scrollbar-color:	#17aaac  #e1e1e1 ;
}

html,
body {
  width: 100vw;
  height: 100vh;
  
}

body {
    background-color: rgb(236, 236, 236);
}

p {
    font-family: var(--body-font);
    color: var(--text-color)
}

ul, li {
  font-family: var(--body-font);
  font-size: 1em;
 color: var(--text-color)

}

h1,h2,h3,h4,h5,h6 {
   font-family: var(--header-font);
   color: var(--text-color)
}

a, a:visited {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
 background-color: #fd941d;
 color: white;
 text-decoration: none;

 

}

::selection {
  color: white;
  background:var(--teal)
}

a {
    transition: .3s;
}

img {
  max-width: 100%;
  height: auto;
}

.wrap {
width: 50%;
margin: 0 auto;
}
/** One collumn layout **/

.one-column {
  display: grid;
  grid-template-areas: 
  'header header header'
  'main main main'
  'footer footer footer';
}

.header, .main, .footer {
  padding: 20px;
  margin: 5px;
  max-height: 100%;

}

.header {
  grid-area: header;

}

.main {
  grid-area: main;

}

.footer {
  grid-area: footer;
}

/** One column layout **/

/** landing **/

.warning {
  height: 60%;
  padding: 20px;
}

.webrings {
  max-height: 30%;
  padding: 20px;
  overflow: auto;
  
}

.button1 {
  border: 2px outset rgb(181, 181, 181);
  transition: .3s;
}


.button1:hover {
  background-color: gray;
  cursor: pointer;
  
}


.warning, .webrings {
  background: gray;
  background: linear-gradient(1deg, rgba(196, 196, 196, 1) 0%, rgba(219, 219, 219, 1) 50%, rgba(255, 255, 255, 1) 100%);
  border: var(--border);
  margin: 20px  auto;
}

/** media wuery/mobile  **/

@media screen and (max-width: 900px ) {
  .one-column {
  display: grid;
  grid-template-areas: 
  'header header header'
  'main main main'
  'footer footer footer';
}

.wrap {
  width: 90%;
}

.header, .main, .footer {
  padding: 10px;
  margin: 5px;
  max-height: 100%;
  width: 100%;
  

}


}