/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/*

some links for styling:
https://colorcodes.io/green/celadon-color-codes/ - colors im using for this site

https://pocketbroto.com/en/home - i really like the colors on this page and love the goblin-core

*/

/*theme colors *

button colors/ dark color: #4A5E4C;
button hover color: #2a362c;
header and footer color: #ADDFB3;
section color: #bdf3c4;

I might want to add more mobile friendly display for webrings when viewed on mobile




*/

:root{
 
--dark-color: #4A5E4C;
--hover-color:#2a362c;
--light-color:#ADDFB3;
--section-color:#bdf3c4;
--body-color:#171e18;
 cursor: url('images/isda_cusor.cur'), auto;

}

body {
  color: var(--body-color);
  font-family: Helvetica, Verdana;
  width: 75%;
  margin: auto;
  background-color: var(--dark-color);
  background-image: url("images/seamless-texture-green-watercolor.jpg");
  background-attachment: fixed;
  cursor: url('images/isda_cusor.cur'), auto;
  
  
}



/* minecraft font */
@font-face {
  font-family: MinecraftDefault;
  src: url(minecraft/MinecraftDefault-Regular.ttf);
  font-style: normal;
}
@font-face{
    font-family: MinecraftDefault;
    src: url(minecraft/MinecraftDefault-Bold.ttf);
    font-weight:bold;
}
@font-face{
     font-family: MinecraftDefault;
    src: url(minecraft/MinecraftDefault-italics.ttf);
    font-style: italic;
}

.minecraft{
   background-image: url(minecraft/images/BlockSprite_grass-block.png), url(minecraft/images/BlockSprite_stone.png);
    background-repeat: repeat-x, repeat;
  cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto !important;
  font-family: MinecraftDefault;
    color:white; /* make font more readable */
    border-radius: 0px;
  padding: 15px;
  border-style: none;
  border-width: thick;
  border-color: white;
  
}
.minecraft a{
  background-image: url(minecraft/images/BlockSprite_moss-block.png);
    background-repeat: repeat;
  color:rgb(203, 203, 203);
    text-shadow: 2px 2px rgba(0, 0, 0, 0.19);
}

.minecraft img{
  cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto !important;
  background-image:none !important;
}
.minecraft a{
  cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto !important;
  background-image:none !important;
}

.minecraft h2{
  font-size: 2.1em; 
  text-shadow: 2px 2px rgba(0, 0, 0, 0.19);
}

.minecraft hr{
  background-image: url(minecraft/images/ItemSprite_diamond.png);
  background-repeat: space;
}

.minecraft button{
   font-family: MinecraftDefault;
    border-style: none;
    font-size: 2em; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   background-image: url(minecraft/images/BlockSprite_moss-block.png);
   border-radius: 25px;
    cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto !important;
}

.minecraft button a, .minecraft button a:visited {
    color:white;
    text-shadow: 2px 2px rgba(0, 0, 0, 0.19);
  text-decoration: none;
  cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto !important;
}
 .minecraft button:hover {
    color:rgb(168, 168, 168);
    font-size: 2.1em; 
    text-shadow: 2px 2px rgba(0, 0, 0, 0.19);
  background-image: url(minecraft/images/BlockSprite_moss-block.png);
  cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto !important;
}


* {
  box-sizing: border-box;
}

/* ids */

#bannerisda{
  width: 300px;
}
#title_image{
  width: 400px;
}

#profile_pic{
  height:auto;
  width:100%;
  border-radius: 25px;
}

 #template{
        display:none;
      }

  /* to center a webring link */    
  #center {
    padding-top: 10px;
    margin: auto;
    width: 50%;
   text-align: center;
}

/* adds a boarder image around only text */
/* also if ur using this class make sure to put <br> tags after */
#board_img_test{
  display:inline;
  border-radius: 25px;
  border: 20px solid transparent;
  padding: 15px;
  border-image: url(/images/boarder_test.png) 20% round;
}


hr{
  height:2px;
  border-style: double;
  border-width: thick;
  border-color: #4A5E4C;
  border-right-style: none;
  border-left-style: none;
  border-bottom-style:none;
  color: #4A5E4C;
  background-color: transparent;
}

figure{
  display: inline-block;
  margin: 2.5%;
}

/* image sizing class */

.small_img{
  width:300px;
}


.screenshot{
  width: 400px;
}

.screenshot_big{
  width: 600px;
}



.isda { 
   width: 400px !important;
  height: auto;
}


/*watecolor grid */
.watercolor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px; /* Adjust spacing as needed */
  margin: 20px 0;
}

.watercolor-grid figure {
  margin: 0;
  text-align: center;
}

.watercolor-grid img.watercolor {
  width: 100%;
  height: auto;
  max-width: 100%;
  border-radius: 10px; /* Optional: rounded corners */
}




button {
  border-radius: 25px;
  margin: 0;
  padding: 14px 16px;
  overflow: hidden;
   background-color: var(--dark-color);
   border-style: double;
  border-width: thick;
  border-color: var(--light-color);
  color: white;
 /* cursor: pointer; */
  
  cursor: url('images/isda_cusor_Pointer.cur'), pointer;
  
}

button a, button a:visited {
  color:white;
  text-decoration: none;
  cursor: url('images/isda_cusor_Pointer.cur'), pointer; 
}
 button:hover {
  background-color: var(--hover-color);
  cursor: url('images/isda_cusor_Pointer.cur'), pointer;
}



a {
  color: #1e3620;
  cursor: url('images/isda_cusor_Pointer.cur'), pointer;
}
a:visited {
  color: #402c47;
}

/* Header/Blog Title */
.header {
  margin: 15px 0; 
  padding: 5px;
  border-radius: 25px;
  text-align: center;
  background-color: #ADDFB3;
  border-style: double;
  border-width: thick;
  border-color: #4A5E4C;
}


/* nav bar styling for desktop*/
nav ul {
  list-style-type: none;
  border-radius: 25px;
  margin: 0;
  padding: 0;
  overflow: hidden;
   background-color: #4A5E4C;
   border-style: double;
  border-width: thick;
  border-color: #ADDFB3;
}

nav li {
  list-style-type: none;
  float: left;
  border-right: thick double #ADDFB3;
}




nav li:last-child {
  border-right: none;
  float:right;
   font-family: MinecraftDefault;
   cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto;
}
nav li:last-child a:hover {
  border-right: none;
  float:right;
   font-family: MinecraftDefault;
   cursor: url('minecraft/images/Diamond_Sword_JE3_BE3.cur'), auto;

}

nav li a {
  list-style-type: none;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:visited {
  list-style-type: none;
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav li a:hover {
   background-color: #2a362c;

}

.collapsible{
  display:none;
  width: 100%;
}

#mobile{
  display: none;
}

/* Create 2 unequal columns that floats next to each other */

/* main column */
.main {
  float: left;
  width: 75%;
  background-color:transparent;
  padding-left: 5px;
  padding-right: 5px;
}


/* Right column */
.aside {
  float: left;
  width: 25%;
  background-color:transparent;
  padding-right: 5px;
}


/* Clear floats after the columns */
.row::after {
  content: "";
  display: table;
  clear: both;
}

.row {
  background-color:transparent;
}

.rss div{
  font-size: smaller;

}
.rss {
 padding: 5px;
}

.feed-item-title a{
  
  color:#2a362c;
   text-decoration: none;  
}
.feed-item-title a:hover{
 color: #4A5E4C;
   text-decoration: none;  
}

/* Add a card effect for articles */
section {
  background-color: #bdf3c4;
  border-radius: 25px;
  padding: 15px;
  border-style: double;
  border-width: thick;
  border-color: #4A5E4C;
  margin: 15px 0; 
  display: flow-root;
}

.warning {
  background-color:#f3bebe;
  border-color:#5e4a4a;
}

 li{  
   list-style-type: "✦ ";
 }
  

footer {
  margin: 15px 0; 
  padding: 5px;
  border-radius: 25px;
  text-align: center;
  background-color: #ADDFB3;
  border-style: double;
  border-width: thick;
  border-color: #4A5E4C;
}

/* button expermiments class */

.hello{
  display: none;
}

/* styling for my journal images */
 .imageWrap{
    display:flex;
    
  }
  .text{
    flex-basis: 100%;
  }
  .wrapImage{
      height: auto;
      width: 100%;
      flex-basis: 100%;
  }
  .box{
    float: right;
    height: 30%;
    width: 30%;
  }

  .box_radius_right{
    float: right;
    width: 50%;
    border-radius: 25px;
    margin-left: 10px;

  }
   .box_radius_left{
    float: left;
    width: 50%;
    border-radius: 25px;
    margin-right: 10px;

  }




/* plz hide the nav bar ;-; */
 .imageWrap{
    display:flex;
    
  }
  .text{
    flex-basis: 100%;
  }
  .wrapImage{
      height: auto;
      width: 100%;
      flex-basis: 100%;
  }
  .box{
    float: right;
    height: 30%;
    width: 30%;
  }


  /* for BIG screens*/
@media screen and (min-width: 1800px) {
  
  .box_radius_right{
    float: right;
    width: 30%;
    border-radius: 25px;
    margin-left: 10px;

  }
   .box_radius_left{
    float: left;
    width: 30%;
    border-radius: 25px;
    margin-right: 10px;

  }

}



@media screen and (max-width: 1200px) {
  .screenshot_big{
  width: 100%;
}

}

/* Responsive layout for mobile devices */
/*a ton of people surf the internet on only their phone!*/
@media screen and (max-width: 1050px) {
 .aside, .main {   
    width: 100%;
    padding: 0;
  }
  body {
    width: 100%;
  }
  /* mobile navigation */
   nav ul li.right, 
  nav ul li {
    float: none;
    border-right: none;
    border-bottom:  thick double #ADDFB3;
  }
  nav li:last-child {
    float: none;
    border-right: none;
    border-bottom: none;

  }
  nav li:last-child a:hover{
  float: none;
  }


  #bannerisda, #title_image{
    width: 200px;
  }

  figure img{
    width:400px;
  }
  /* actives menu button for mobile nav */
  .collapsible{
    display: initial;
  }

  #desktop{
    display:none;
 }

  /*adds plus to menu button */
  .collapsible:after {
    content: '\002B';
    color: white;
    float: right;
  }
   /*adds minus to menu button */
.active:after {
  content: "\2212";
}

  /* images will be on top of each other instead of side to side */
  figure{
    display: block;
  }
  /*side bar changes */
  #about_me_sidebar, #websites_links_sidebar{
    display:none;
    /* i might just make an about me page tbh instead of having it in the sidebar*/
    /* same for website links - i think it be nice to have like a page to sort links */
  } 
  /*makes grid display go away on mobile*/
  .watercolor-grid {
    display: block;
  }
  .watercolor-grid figure {
    margin-bottom: 20px;
  }

  .screenshot{
  width: 100%;
}
.screenshot_big{
  width: 100%;
}
}